<template>
  <div>
    <el-breadcrumb separator="">
      <el-breadcrumb-item class="line" :to="{ path: $route.path }">{{
        $route.meta.title
      }}</el-breadcrumb-item>
      <el-button plain class="right">
        <a @click="Return">
          <i class="el-icon-back"></i>
          返回
        </a>
      </el-button>
      <el-button plain class="right">
        <a @click="shuaxin">
          <i class="el-icon-refresh"></i>
          刷新
        </a>
      </el-button>
    </el-breadcrumb>
    <!-- 商品列表 -->
    <div>
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              <i class="el-icon-collection-tag"></i> 商品列表
            </el-header>
            <el-main class="info-main padding-style">
              <el-table :data="goodData" border>
                <el-table-column label="商品图片">
                  <template slot-scope="scope">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="scope.row.skuVo.image"
                    ></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="商品名称"
                ></el-table-column>
                <el-table-column
                  prop="skuVo.price"
                  label="价格/货号"
                ></el-table-column>
                <el-table-column prop="skuVo.spec" label="属性"> 
    <template scope="scope" >
                    
                    <p><span>{{scope.row.skuVo.spec[0].label}},</span> <span>{{scope.row.skuVo.spec[0].value}}</span></p>
                 <p> <span>{{scope.row.skuVo.spec[1].label}},</span> <span>{{scope.row.skuVo.spec[1].value}}</span></p>
                    </template>

                </el-table-column>
                <el-table-column prop="num" label="数量"> </el-table-column>
                <el-table-column prop="skuVo.repertory" label="库存"> </el-table-column>
                <el-table-column prop="money" label="小计">
                </el-table-column>
              </el-table>
            </el-main>
            <el-footer class="info-foot">
              <div class="paging-style">
                合计：¥
                <span class="redFont">{{totoMany}}</span>
              </div>
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </div>
    <!-- 添加商品 -->
    <div>
      <el-container>
        <el-main>
          <el-container class="parent-body">
            <el-header class="content-header">
              添加商品
            </el-header>
            <el-main
              class="info-main padding-style"
              style="margin-top: 30px; margin-left: 60px"
            >
              <el-form
                :label-position="right"
                :model="addGoodData"
                label-width="120px"
              >
                <el-form-item label="搜索商品：">
                  <el-input
                    v-model="addGoodData.searchGood"
                    placeholder="商品名称/货号"
                  ></el-input>
                  <el-button
                    class="whiteBlue"
                    @click="search(addGoodData.searchGood)"
                    >搜索</el-button
                  >
                  <el-select
                    v-model="addGoodData.selectGood"
                    placeholder="选择商品"
                  >
                    <el-option label="手机" value="phone"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品名称：">
                  {{ this.addGoodData[0].goodName }}
                </el-form-item>
                <el-form-item label="货号：">
                  {{ this.addGoodData[0].goodNum }}
                </el-form-item>
                <el-form-item label="分类：">
                  {{ this.addGoodData[0].goodClass }}
                </el-form-item>
                <el-form-item label="品牌：">
                  {{ this.addGoodData[0].goodBank }}
                </el-form-item>
                <el-form-item label="价格：">
                  ￥{{ this.addGoodData[0].goodPrice }}
                </el-form-item>
                <el-form-item label="属性：">
                  <span>
                    <el-select
                      v-model="addGoodData.goodColor"
                      multiple
                      placeholder="颜色："
                      style="width: 90px"
                    >
                      <el-option label="黑色" value="black"></el-option>
                      <el-option label="玫瑰金" value="black"></el-option>
                    </el-select>

                    <el-select
                      v-model="addGoodData.goodSize"
                      placeholder="尺寸"
                    >
                      <el-option label="黑色" value="black"></el-option>
                      <el-option label="玫瑰金" value="Rose gold"></el-option>
                    </el-select>
                  </span>
                </el-form-item>
                <el-form-item label="库存：">
                  {{ this.addGoodData[0].goodStock }}
                </el-form-item>
                <el-form-item label="数量：">
                  <el-input v-model="addGoodData.goodsNum"></el-input>
                </el-form-item>
                <el-form-item label="操作：">
                  <el-button class="whiteBlue" @click="addOrder(addGoodData)"
                    >加入订单</el-button
                  >
                </el-form-item>
              </el-form>
            </el-main>
            <el-footer class="info-foot" style="text-align: center">
              <el-button
                class="whiteBlue"
                type="primary"
                @click="submitForm(addGoodData)"
                >确定</el-button
              >
              <el-button @click="quXiao">取消</el-button>
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
import item from"@/api/order/orderItem";
export default {
  data() {
    return {
       // ids 查询出信息
      ids: [],
      // 合计
      totoMany:'',
      // 
      allPrice: 0,
      goodData: [],
      addGoodData: [
        {
          searchGood: "",
          selectGood: "",
          goodName: "2018 iphoneXsMax128GB",
          goodNum: "No999999",
          goodClass: "数码 > 手机",
          goodBank: "Apple Inc.",
          goodPrice: 9599.0,
          goodColor: "",
          goodSize: "",
          goodStock: 100,
          goodsNum: ""
        }
      ]
    }
  },
  mounted() {
    this.init();
    var orderId = parseInt(this.$route.query.orderId);
    this.totoMany=parseInt(this.$route.query.totoMany);
    this.intdata(orderId);
  },
  methods: {
    init() {
      this.goodData.forEach(item => {
        if (item != null) {
          this.allPrice = Number(this.allPrice) + Number(item.Subtotal)
        }
        // if (item.children) {
        //   traverse(item.children)
        // }
      })
      this.$nextTick(() => {})
    },
    shuaxin() {
      this.$router.go(0)
    },
    Return() {
      this.$router.go(-1);
    },
    quXiao() {
      this.$router.push("/order/orderList")
    },
    submitForm(row) {
      alert("提交成功")
      console.log(row)
    },
    search(searchGood) {
      console.log(searchGood)
      alert("搜索成功")
    },
    addOrder(addGoodData) {
      console.log(addGoodData)
      alert("加入订单成功")
    },
      //  商品信息
    intdata(orderId){

         this.ids[0] = orderId;
      item.getByIdList(this.ids).then(response => {
        console.log(response);
        var data = JSON.parse(JSON.stringify(response.data.data));
        console.log(data);
        this.goodData = data[0].list;

        this.goodData.forEach((item,index)=>{

          let specJson=[];
if(item.skuVo.spec){

  specJson=JSON.parse(item.skuVo.spec);
  console.log(specJson);
}

this.goodData[index].skuVo.spec=specJson;

        })
        // this.goodData.push(data);
      });
    },
  }
}
</script>
<style scoped>
.redFont {
  color: red;
}
.whiteBlue {
  background-color: blue;
  color: white;
}
.el-input {
  width: 40%;
}
</style>
